<template>
  <div class="dashboard-container-content-right-part3">
    <PartTitle title="金库审批系统分布" />
    <div id="pieChart" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import PartTitle from "./partTitle.vue";
  import {mapGetters} from 'vuex';

  export default {
    name: "ContentRightPart3",
    components: {
      PartTitle,
    },
    computed: {
      ...mapGetters([
        'logAuditList'
      ])
    },
    watch: {
      logAuditList: {
        handler() {
          this.initChart();
        },
        deep: true
      },
    },
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        // const logAuditList = await this.$store.dispatch('logAudit/getList');
        const countBySystem = this.logAuditList.reduce((result, item) => {
          const key = item['k1'];
          result[key] = (result[key] || 0) + 1;
          return result;
        }, {});
        const data = [];
        Object.keys(countBySystem).forEach(key=> {
          data.push({ value: countBySystem[key], name: key });
        });
        const chartDom = document.getElementById("pieChart");
        const myChart = echarts.init(chartDom);
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          series: [
            {
              name: '审计日志条数',
              type: 'pie',
              radius: '50%',
              data: data,
              label: {
                color: "#fff",
                fontSize: 14,
              },
            }
          ]
        };
        option && myChart.setOption(option);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .dashboard-container-content-right-part3 {
    width: 100%;
    height: 380px;
    border-radius: 14px;
    background: linear-gradient(180deg, #314175 0%, #0e1428 100%);
    box-shadow: 0px 20px 101px 0px #0303033f;
    padding: 22px;
  }
</style>
